<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="https://unpkg.com/vue-router"></script>
 <div id="app">
 	<h1>Hello VueRouter !</h1>
 	<div><!--配置路由的入口文件-->
 		<router-link to='/Foo'>Go To The Foo</router-link>
 		<router-link to='/Bar'>Go To The Bar</router-link>
 	</div>
 	<div><!--配置路由的出口文件-->
 		<router-view></router-view>
 	</div>
 </div>	
 <script>
 	//配置模板
 	const Foo = {template:`<div>你好啊,欢迎来到Foo页面</div>`};
 	const Bar = {template:`<div>你好啊,欢迎来到Bar页面</div>`};

 	//定义路由
 	const routes = [
 		{path:'/Foo',component:Foo},
 		{path:'/Bar',component:Bar},
 	];

 	//实例化路由
 	const router = new VueRouter({
 		routes:routes,
 	})

 	//挂载到根上
 	const vm = new Vue({
 		router
 	}).$mount('#app');
 </script>
</body>
</html>